<template>
   <NowLoading v-if="firstLoading"/>
  <div class="mizone-rc" v-else>
   
    <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
        <div v-for="item in mizoneRc" class="mizone-rc-item">
          <div v-if="item.content">
            <QuestionItem  
        v-if="item.content.content_type===6"
        :q_id="item.content.question.q_id"
        :content_type="item.content.content_type"
        :question="item.content.question.question"
        :answer_num="item.content.question.answer_num"
        :praise_num="item.content.question.praise_num"
        :tag_list="item.content.tag_list"
        :answer_list_v2="item.content.question.answer_list_v2"
       
        />
        <!-- 100 detail买家秀   -->
       <DetailItem v-else-if="item.content.content_type===100||item.content.content_type===1"
        :id="item.content.id"
        :nickname="item.content.nickname"
        :icon="item.content.icon"
        :content_type="item.content.content_type"
        :content="item.content.content"
        :pic_list="item.content.pic_list"
        :tag_list="item.content.tag_list"
        :hot_comment="item.content.hot_comment"
        :comment_num="item.content.comment_num"
        :praise_num="item.content.praise_num"
   
       />
       <!-- 投票 -->
        <VoteItem v-else-if="item.content.content_type===5"
        :id="item.content.id"
        :nickname="item.content.nickname"
        :icon="item.content.icon"
        :content_type="item.content.content_type"
        :content="item.content.content"
        :hot_comment="item.content.hot_comment"
        :comment_num="item.content.comment_num"
        :praise_num="item.content.praise_num"
        :title="item.content.title"
        :vote_detail="item.content.vote_detail"

        />
        <!-- 测评 -->
        <TestItem
        v-else-if="item.content.content_type===99"
        :id="item.content.id"
        :nickname="item.content.nickname"
        :icon="item.content.icon"
        :content_type="item.content.content_type"
        :content="item.content.content"
        :video_list="item.content.video_list"
        :tag_list="item.content.tag_list"
        :hot_comment="item.content.hot_comment"
        :comment_num="item.content.comment_num"
        :praise_num="item.content.praise_num"
        />

          </div>



        </div>
      </van-list>
      
      
  </div>
</template>

<script setup lang="ts">
import NowLoading from '../../../../components/NowLoading.vue'
import DetailItem from '../../findItem/recommendItem/DetailItem.vue'
import QuestionItem from '../../findItem/recommendItem/QuestionItem.vue'
import TestItem from '../../findItem/recommendItem/TestItem.vue'
import VoteItem from '../../findItem/recommendItem/VoteItem.vue'
import {  MiReDataList } from '../../../../typings'
import { getMizoneRec } from '../../../../api/find'
import { onMounted, ref ,nextTick} from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute();
let r = Number(route.query.id);
const num = ref<number>(0);
let mizoneRc = ref<Array<MiReDataList>>([]);
const loading = ref(false);
const finished = ref(false);
const firstLoading = ref(true);
onMounted(() => {
  getData(r,0);
});

const getData = async (r:number,i:number) => {
  let resRc = await getMizoneRec(r,i);
  mizoneRc.value = [...mizoneRc.value, ...resRc.data.rec_list];
  console.log("米圈推荐=>推荐列表", mizoneRc.value);
  firstLoading.value = false;
  
}
const onLoad = () => {
  setTimeout(() => {
  
    getData(r,num.value);
    nextTick(() => {
      console.log("米圈推荐num=>",num.value);
      
      loading.value = false;
      num.value += 1;
        })
        // 加载状态结束
        // 数据全部加载完成
        if (mizoneRc.value.length >= 1000) {
          finished.value = true;
        }
      }, 1200);
};


</script>

<style lang="scss" scoped>

.mizone-rc {
  background-color: #f6f6f6;
}
.mizone-rc-item{
  margin-bottom: .4rem;
}

</style>